<template>
  <div class="vehicle">
    <el-card>
      <el-form label-width="120px" style="margin-bottom: -20px">
        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="车辆类型：">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆类型">
              <el-input placeholder="请输入车牌号码" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="margin-left: 100px">
            <el-button type="primary">搜索</el-button>
            <el-button>重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px" class="change">
      <tab-change>
        <tab-item style="margin-right: 10px">
          <span class="status">全部</span>
          <span class="status-num" style="font-weight: bold">{{
            +truckStatus[0] + +truckStatus[1]
          }}</span>
        </tab-item>
        <tab-item style="margin-right: 10px">
          <span class="status">可用</span>
          <span class="status-num" style="font-weight: bold">{{
            truckStatus[1]
          }}</span>
        </tab-item>
        <tab-item style="margin-right: 10px">
          <span class="status">停用</span>
          <span class="status-num" style="font-weight: bold">{{
            truckStatus[0]
          }}</span>
        </tab-item>
      </tab-change>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-row>
        <el-col>
          <el-button type="primary">新增车辆</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="truckList"
        border
        stripe
        :header-cell-style="{ background: '#f8faff', color: '#818693' }"
        style="margin: 20px 0"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="licensePlate" label="车辆号码" width="180">
        </el-table-column>
        <el-table-column prop="truckTypeName" label="车辆类型">
        </el-table-column>
        <el-table-column prop="driverNum" label="司机数量"></el-table-column>
        <el-table-column prop="workStatus" label="车辆状态">
          <template #default="{ row }">
            <div :class="row.workStatus ? 'green-status' : 'red-status'">
              {{ row.workStatus ? "可用" : "停用" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="deviceGpsId" label="GPS设备ID">
        </el-table-column>
        <el-table-column prop="allowableLoad" label="实载重量（T）">
        </el-table-column>
        <el-table-column prop="allowableVolume" label="实载体积（方）">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default>
            <el-button type="text">查看详情</el-button>
            <el-button type="text">启用</el-button>
            <el-button type="text">配置司机</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryInfo.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getTruckListInfoApi, getTruckStatusApi } from "@/api/transit";
export default {
  name: "VehicleIndex",
  data() {
    return {
      truckList: [],
      truckStatus: [],
      // truckStatus: {},
      // truckStatusCounts: [],
      queryInfo: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    // 获取车辆信息
    async getTruckListInfo() {
      const { data } = await getTruckListInfoApi(this.queryInfo);
      // console.log(data);
      this.truckList = data.items;
      this.queryInfo.total = +data.counts;
    },
    // 获取车辆状态
    async getTruckStatus() {
      const { data } = await getTruckStatusApi();
      // console.log(data);
      for (let i in data) {
        this.truckStatus.push(data[i]);
      }
      console.log(this.truckStatus);
    },
    // 分页
    handleSizeChange(newPageSize) {
      this.queryInfo.pageSize = newPageSize;
      this.getTruckListInfo();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getTruckListInfo();
    },
  },
  created() {
    this.getTruckListInfo();
    this.getTruckStatus();
  },
};
</script>

<style lang="less" scoped>
.change {
  display: flex;
  ::deep .el-card__body {
    padding: 0 !important;
    .tab-item {
      width: 120px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      color: #333;
      font-size: 14px;
      cursor: pointer;
      &.active {
        background-color: #ffeeeb;
        color: #e15536;
      }
    }
  }
}
.green-status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #1dc779;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.red-status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
</style>
